<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情 - 商品管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" th:href="@{/products}">
                <i class="fas fa-store me-2"></i>商品管理系统
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/products}">
                            <i class="fas fa-list me-1"></i>商品列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/products/new}">
                            <i class="fas fa-plus me-1"></i>添加商品
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="container mt-4">
        <!-- 面包屑导航 -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a th:href="@{/products}">商品列表</a></li>
                <li class="breadcrumb-item active" th:text="${product.name}">商品详情</li>
            </ol>
        </nav>

        <!-- 页面标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h3">
                <i class="fas fa-info-circle me-2"></i>商品详情
            </h1>
            <div class="btn-group" role="group">
                <a th:href="@{/products}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-1"></i>返回列表
                </a>
                <a th:href="@{/products/{id}/edit(id=${product.id})}" class="btn btn-warning">
                    <i class="fas fa-edit me-1"></i>编辑商品
                </a>
            </div>
        </div>

        <!-- 商品详情卡片 -->
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-box me-2"></i>基本信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <dl class="row">
                                    <dt class="col-sm-4">商品ID:</dt>
                                    <dd class="col-sm-8" th:text="${product.id}"></dd>
                                    
                                    <dt class="col-sm-4">商品名称:</dt>
                                    <dd class="col-sm-8">
                                        <span class="fw-bold" th:text="${product.name}"></span>
                                    </dd>
                                    
                                    <dt class="col-sm-4">价格:</dt>
                                    <dd class="col-sm-8">
                                        <span class="text-success fw-bold fs-5" th:text="'¥' + ${product.originalPrice}"></span>
                                    </dd>
                                </dl>
                            </div>
                            <div class="col-md-6">
                                <dl class="row">
                                    <dt class="col-sm-4">产地:</dt>
                                    <dd class="col-sm-8" th:text="${product.originPlace}"></dd>
                                    
                                    <dt class="col-sm-4">分类ID:</dt>
                                    <dd class="col-sm-8" th:text="${product.categoryId}"></dd>
                                    
                                    <dt class="col-sm-4">店铺ID:</dt>
                                    <dd class="col-sm-8" th:text="${product.shopId}"></dd>
                                    
                                    <dt class="col-sm-4">产品ID:</dt>
                                    <dd class="col-sm-8" th:text="${product.productId}"></dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 侧边栏操作 -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-cogs me-2"></i>操作
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a th:href="@{/products/{id}/edit(id=${product.id})}" class="btn btn-warning">
                                <i class="fas fa-edit me-1"></i>编辑商品
                            </a>
                            <button type="button" 
                                    class="btn btn-danger"
                                    th:onclick="'confirmDelete(' + ${product.id} + ')'">
                                <i class="fas fa-trash me-1"></i>删除商品
                            </button>
                            <hr>
                            <a th:href="@{/products}" class="btn btn-outline-secondary">
                                <i class="fas fa-list me-1"></i>返回列表
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 商品统计信息 -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h6 class="card-title mb-0">
                            <i class="fas fa-chart-bar me-2"></i>商品统计
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-6">
                                <div class="border-end">
                                    <h4 class="text-primary mb-0" th:text="${product.id}">1</h4>
                                    <small class="text-muted">商品编号</small>
                                </div>
                            </div>
                            <div class="col-6">
                                <h4 class="text-success mb-0" th:text="'¥' + ${product.originalPrice}">¥100</h4>
                                <small class="text-muted">价格</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-exclamation-triangle text-warning me-2"></i>确认删除
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除商品 "<span th:text="${product.name}"></span>" 吗？</p>
                    <p class="text-muted">此操作无法撤销。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <form id="deleteForm" method="post" style="display: inline;">
                        <button type="submit" class="btn btn-danger">确认删除</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        function confirmDelete(productId) {
            const deleteForm = document.getElementById('deleteForm');
            deleteForm.action = '/products/' + productId + '/delete';
            
            const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
            deleteModal.show();
        }
    </script>
</body>
</html>
